<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin: 100px auto;
            /* border: 8px solid #cccccc; */
            border-radius: 50%;
        }


        #myCanvas {


            background-color: #cccccc;
            border-radius: 50%;


        }

        button {

            background-color: rgb(39, 207, 9);
        }
    </style>
</head>

<body>
    <div class="box">
        <canvas id="myCanvas" width="100" height="100">

    </div>
    <button>开始按钮</button>
    <script>
        var c = document.getElementById("myCanvas");
        var button = document.getElementsByTagName("button")[0];



        // var width = c.width;
        // var r = Math.floor(width - 50);
        // var height = c.height;
        // var ctx = c.getContext("2d");
        // ctx.beginPath();
        // ctx.arc(50, 50, r, -0.5 * Math.PI, 0 * Math.PI, true);
        // ctx.stroke();

        var width = c.width;
        var r = Math.floor(width - 50);
        var height = c.height;
        var ctx = c.getContext("2d");
        ctx.strokeStyle = "red"
        ctx.lineWidth = 10;

        button.onclick = function () {
            clearInterval(timer);
            var n = -0.1;
            ctx.clearRect(0, 0, 580, 580) // 清除
            var timer = setInterval(function () {

                // var PI = 2* Math.PI;

                ctx.beginPath();
                ctx.arc(50, 50, r, n * Math.PI, -0.5* Math.PI, true);
                ctx.stroke();

                if (n <= -0.5) {
                    clearInterval(timer);
                    n = -0.5;

                }
                n += 0.4;

            }, 1000)

        }
    </script>
</body>

</html>